<template>
  <div class="container">
    <img
      :src="item.image"
      alt=""
      class="img"
    >

    <div>{{ item.name }}</div>
    <div>
      {{ item.price | price }}
      <el-button
        size="mini"
        @click="exchange({ id: item._id })"
      >
        兑换
      </el-button>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  filters: {
    price(v) {
      return `${v}积分`;
    },
  },
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    ...mapActions(['exchange']),
  },
};
</script>

<style scoped>
.container {
  width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img {
  width: 100px;
}
</style>
